// 库存台账样式 - 5-ledger.less
// 使用rem单位，基于80px基准 (80px = 1rem)

// 变量定义
@primary-color: #4fc3f7;                    // 主色调 - 科技蓝色
@secondary-color: #81d4fa;                  // 辅助色 - 浅蓝色
@accent-color: #bbdefb;                     // 强调色 - 更浅的蓝色
@background-dark: #0f1c3c;                  // 深色背景 - 深蓝色
@background-light: #1a2d5a;                 // 浅色背景 - 中蓝色
@card-bg: rgba(22, 40, 75, 0.7);            // 卡片背景 - 半透明蓝色
@border-color: #2a4a7c;                     // 边框颜色 - 边框蓝
@text-color: #e0e0e0;                       // 文字颜色 - 浅灰色
@success-color: #4caf50;                    // 成功色 - 绿色
@error-color: #f44336;                      // 错误色 - 红色

// 台账表格容器样式
.ledger-container {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
  padding: 0.1875rem;
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 0.1875rem;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.125rem;
    height: 0.125rem;
    border-left: 2px solid #02a6b5;
    border-top: 2px solid #02a6b5;
    content: "";
  }

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 0.125rem;
    height: 0.125rem;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
    content: "";
  }

  .ledger-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.125rem;

    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0.125rem;
      height: 0.125rem;
      border-bottom: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
      content: "";
    }

    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 0.125rem;
      height: 0.125rem;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
      content: "";
    }
  }
}

// 台账表格头部样式
.ledger-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.1875rem;
  min-height: 0.6rem;

  .ledger-title {
    color: @primary-color;
    font-size: 0.275rem;
    font-weight: 600;
    line-height: 1;
    margin: 0;
  }

  .ledger-date {
    color: @accent-color;
    font-size: 0.2rem;
  }
}

// 台账数据表格样式
.ledger-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.2rem;

  th {
    background: rgba(30, 60, 114, 0.7);
    color: @primary-color;
    padding: 0.15rem 0.125rem;
    text-align: center;
    font-weight: 600;
    border-bottom: 1px solid @border-color;
    word-break: break-word;
    line-height: 1.2;
  }

  td {
    padding: 0.15rem 0.125rem;
    text-align: center;
    border-bottom: 1px solid rgba(42, 74, 124, 0.5);
    color: @text-color;
    vertical-align: middle;
  }

  tr:hover {
    background: rgba(56, 107, 201, 0.2);
  }

  // 高亮行样式（小计行）
  .highlight-row {
    background: rgba(79, 195, 247, 0.1);
    font-weight: 600;

    td {
      color: @primary-color;
    }
  }

  // 总计行样式
  .total-row {
    background: rgba(25, 118, 210, 0.2);
    font-weight: 700;

    td {
      color: @accent-color;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .ledger-data-table {
    font-size: 0.175rem;

    th,
    td {
      padding: 0.125rem 0.0625rem;
    }
  }

  .ledger-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;

    .ledger-date {
      font-size: 0.175rem;
    }
  }
}